<template>
	<view>
		<!-- 地址选择 -->
		<view class="main-bg-color flex align-center px-3" hover-class="main-bg-hover-color" style="height: 250rpx;" @click="goToAddress">
			<view >
				<view class="font-weight-bold text-white flex align-center">
					{{address.receiverName}} {{address.receiverMobile}} <view v-if="address.isDefault==1" class="border border-white rounded px-1 ml-2 font text-white">默认</view>
				</view>
				<view class="font text-white mt-1">
					{{address.provinceName}} {{address.cityName}} {{address.districtName}} {{address.detailAddress}}
				</view>
			</view>
			<view class="iconfont icon-xiangyou1 text-white ml-auto"></view>
		</view>
		
		<view style="border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;margin-top: -50rpx;overflow: hidden;">
			<uni-list>
				<uni-list-item showArrow>
					<template v-slot:body>
						<view class="flex align-center w-100">
							<view>
								<image v-for="item in cartList" :src="item.productImg" style="width: 100rpx;height: 100rpx;" class="rounded mr-2"></image>
							</view>
							<view class="ml-auto">共{{totalNum}}件</view>
						</view>
					</template>
					
				</uni-list-item>
				<uni-list-item title="商品总价">
					<template v-slot:footer>
						<price color="text-dark">{{totalPrice}}</price>
					</template>
				</uni-list-item>
				<uni-list-item title="运费">
					<template v-slot:footer>
						<view class="font-sm text-muted">包邮</view>
					</template>
				</uni-list-item>
				<uni-list-item title="优惠券" showArrow>
					<template v-slot:footer>
						<view class="font-sm text-muted">无可用</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view class="font-sm text-main">小计</view>
					</template>
					<template v-slot:footer>
						<view class="font-sm text-main">
							<price>{{totalPrice}}</price>
						</view>
					</template>
				</uni-list-item>
				
				<divider></divider>
				<uni-list-item title="发票" showArrow>
					<template v-slot:footer>
						<view class="font-sm text-muted">电子发票-个人</view>
					</template>
				</uni-list-item>
					
			</uni-list>
		</view>
		
		<!-- 底部 -->
		<view class="position-fixed flex align-center justify-end bottom-0 left-0 right-0 bg-white p-2 font-md">
			合计：
			<view class="ml-2">
				<price priceSize="font-md">{{totalPrice}}</price>
			</view>
			<view @click="goPay" class="main-button" hover-class="main-bg-hover-color">去支付</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from "vue";
	import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
	import price from "@/components/price.vue"
	import divider from "@/components/divider.vue"
	import { getDeliveryAddress } from "@/api/address/index.js"
	import { orderCreateOrder } from "@/api/order/order.js"
	
	const cartList = ref([])
	const totalPrice = ref(0)
	const totalNum = ref(0)
	
	const address = ref({})
	
	onLoad((e)=>{
		uni.$on("selectAddress",(item)=>{
			console.log("收到选中地址",item);
			address.value = item
		})
		getUserAddress()
		cartList.value = JSON.parse(e.data)
		cartList.value.forEach(o=>{
			console.log("o.price",o.price);
			totalPrice.value += Number(o.price)
			totalNum.value += o.num
		})
		totalPrice.value = Number(totalPrice.value).toFixed(2)
	})
	
	onUnload(()=>{
		uni.$off("selectAddress")
	})
	
	const goToAddress = () => {
		uni.navigateTo({
			url:"/pages/address/address?type=choose"
		})
	}
	
	// 获取收货地址
	const getUserAddress = async ()=>{
		let res = await getDeliveryAddress({})
		let defaultAddress = res.data.filter(o=>o.isDefault == 1)
		if(defaultAddress && defaultAddress.length > 0){
			address.value = defaultAddress[0]
		}else{
			address.value = res.data.length > 0 && res.data[0]
		}
		console.log("address.value ",address.value );
	}
	
	// 去支付
	const goPay = async () => {
		const params = {
			cartIdList: cartList.value.map(o=>o.id),
			deliveryAddressId: address.value.id
		}
		uni.showLoading({
			title:"正在创建订单..."
		})
		let res = await orderCreateOrder(params);
		console.log(res);
		uni.hideLoading()
		if (res.code === 200) {
			uni.toast("正在跳转支付页面...");
			// 跳转到支付页
			uni.navigateTo({
				url:"/pages/pay/pay?data="+res.data.orderCode
			})
		}
	}
	
</script>

<style>

</style>
